import { ScrollableContainer } from './scrollable-container';
import { PagingInfo, AppStore } from './../../services/appStore';
import { ActivatedRoute } from '@angular/router';
import { Order } from './../../models/order';
import { Subject, BehaviorSubject, Observable, Subscription } from 'rxjs';
import { OrderSvr } from './../../services/order';
import { OrderPanel } from './orderPanel';
import { Component, Directive, ElementRef, Input, Output, EventEmitter, OnDestroy, ChangeDetectorRef, ApplicationRef, style, ViewChild } from '@angular/core';
import { sortBy } from 'lodash';
@Component({

  // The selector is what angular internally uses
  // for `document.querySelectorAll(selector)` in our index.html
  // where, in this case, selector is the string 'home'
  selector: 'order-panels',  // <home></home>
  // Our list of styles in our component. We may add more to compose many styles together
  styleUrls: ['./home.component.scss'],
  // Every Angular template is first compiled by the browser before Angular runs it's compiler
  template: `
   <scrollable-container [ordersArray]="ordersArray" class='panels-container'>
      <order-panel *ngFor="let order of ordersArray;trackBy:trackByOrderId" [order]="order" id="{{order.id}}" ></order-panel>
  </scrollable-container>
  `
})

export class OrderPanels {
  @ViewChild(ScrollableContainer)
  private scrollableContainer: ScrollableContainer;
  @Input()
  set orders(orders: Array<Order>) {
    orders = orders || [];
    this.ordersArray = orders.filter(v => !v.finishTime);
    this.ordersArray = sortBy(this.ordersArray, ['receiveTime']);
    this.changeDetectorRef.detectChanges();
    this.scrollableContainer.childrenChanged();
  }
  private ordersArray: Array<Order>;

  // TypeScript public modifiers
  constructor(private element: ElementRef, private appStore: AppStore, private changeDetectorRef: ChangeDetectorRef) {
  }

  private trackByOrderId(index: number, order: Order) {
    return order.id;
  }
}
